import { Component } from 'react';
import { View } from '@tarojs/components';
import { getAllCate, getContrastTop } from '@/service/apis/contrast/index';
import Taro from '@tarojs/taro';
import Category from './components/Category';
import ProductList from './components/ProductList';
// import { productCategorys, serviceCategorys } from './contants';
import './index.scss';

export default class Index extends Component {
  state = {
    productCateList: [],
    serviceCateList: [],
    productList: [],
    page: 1,
    hasMore: true,
  };
  componentDidShow = async () => {
    this.setState(
      {
        page: 1,
      },
      () => {
        this.getAllCate();
        this.getProductTop();
      },
    );
  };

  getAllCate = async () => {
    try {
      const { data } = await getAllCate();
      console.log('data', data);
      this.setState({
        productCateList: data['商品'],
        serviceCateList: data['服务'],
      });
    } catch (err) {
      Taro.showToast({
        title: err.message,
        icon: 'none',
      });
    }
  };

  getProductTop = async (flag) => {
    const { page, productList } = this.state;
    try {
      const { data } = await getContrastTop({
        page,
      });
      const hasMore = data.products.length >= 10;
      if (flag) {
        this.setState({
          productList: [...productList, ...data.products],
          hasMore,
        });
      } else {
        this.setState({
          productList: data.products,
          hasMore,
        });
      }
    } catch (err) {
      Taro.showToast({
        title: err.message,
        icon: 'none',
      });
    }
  };

  onHandleProduct = (id: number | string) => {
    console.log(id);
    const product: any = this.state.productCateList.filter((item: any) => item.id === id)?.[0];
    Taro.navigateTo({
      url: `/pages/contrast/category/index?type=product&id=${id}&name=${product.b_name}`,
    });
  };

  onHandleService = (id: number | string) => {
    console.log(id);
    const service: any = this.state.serviceCateList.filter((item: any) => item.id === id)?.[0];
    Taro.navigateTo({
      url: `/pages/contrast/category/index?type=service&id=${id}&name=${service.b_name}`,
    });
  };

  onReachBottom() {
    console.log('kkkkkkk');
    // let { hasMore, page } = this.state;
    // if (hasMore) {
    //   this.setState(
    //     {
    //       page: ++page,
    //     },
    //     () => {
    //       this.getProductTop(true);
    //     },
    //   );
    // }
  }

  render() {
    const { productCateList, serviceCateList, productList } = this.state;
    return (
      <View className="contrast-container">
        <Category
          title="商品"
          subTitle="/  居家养老、先用后付"
          list={productCateList}
          onHandle={this.onHandleProduct}
        />
        <Category
          title="服务"
          subTitle="/  预约上门、到店服务"
          list={serviceCateList}
          onHandle={this.onHandleService}
        />
        <ProductList title="比价榜" subTitle="/  比过再来买" list={productList} />
      </View>
    );
  }
}
